<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Organization Chart Plugin</title>
  <link rel="icon" href="img/logo.png">
  <link rel="stylesheet" href="css/jquery.orgchart.css">
  <link rel="stylesheet" href="css/style.css">
  <style type="text/css">
    #chart-container { height:  620px; }
   .orgchart { background: white; }
   .orgchart .node.highlight-parent .title, .chart-legend__item__color.highlight-parent {
       background-color: blue;
   }
   .orgchart .node.highlight-parent .content {
       border: 1px solid blue;
   }
   .orgchart .node.highlight-siblings .title, .chart-legend__item__color.highlight-siblings {
       background-color: green;
   }
   .orgchart .node.highlight-siblings .content {
       border: 1px solid green;
   }
   .orgchart .node.highlight-children .title, .chart-legend__item__color.highlight-children {
       background-color: #aeaeae;
   }
   .orgchart .node.highlight-children .content {
       border: 1px solid #aeaeae;
   }
   #chart-legend {
       padding: 10px;
       width: 300px;
       margin: 0 auto;
       margin-top: 10px;
       border: 2px dashed #aaa;
   }
   #chart-legend__title {
       margin-bottom: 10px;
       font-weight: bold;
   }
   .chart-legend__item {
       margin-bottom: 5px;
       padding: 5px 10px;
   }
   .chart-legend__item__color,
   .chart-legend__item__title {
       vertical-align: middle;
       line-height: 20px;
   }
   .chart-legend__item__color {
       width: 20px;
       height: 20px;
       border-radius: 20px;
   }
   .chart-legend__item div {
       display: inline-block;
   }
  </style>
</head>
<body>
  <div id="chart-legend">
    <div id="chart-legend__title">Legend</div>
    <div class="chart-legend__item">
      <div class="chart-legend__item__color highlight-parent"></div>
      <div class="chart-legend__item__title">Parent</div>
    </div>
    <div class="chart-legend__item">
      <div class="chart-legend__item__color highlight-children"></div>
      <div class="chart-legend__item__title">Children</div>
    </div>
    <div class="chart-legend__item">
      <div class="chart-legend__item__color highlight-siblings"></div>
      <div class="chart-legend__item__title">Siblings</div>
    </div>
  </div>
  <div id="chart-container"></div>

  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.orgchart.js"></script>
  <script type="text/javascript">
    $(function() {

    var datasource = {
      'name': 'Lao Lao',
      'title': 'general manager',
      'children': [
        { 'name': 'Bo Miao', 'title': 'department manager' },
        { 'name': 'Su Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Tie Hua', 'title': 'senior engineer' },
            { 'name': 'Hei Hei', 'title': 'senior engineer',
              'children': [
                { 'name': 'Pang Pang', 'title': 'engineer' },
                { 'name': 'Dan Dan', 'title': 'UE engineer' ,
                'children': [
                  { 'name': 'Er Dan', 'title': 'engineer' },
                  { 'name': 'San Dan', 'title': 'engineer',
                    'children': [
                      { 'name': 'Si Dan', 'title': 'intern' },
                      { 'name': 'Wu Dan', 'title': 'intern' }
                    ]
                  }
                ]}
              ]
            }
          ]
        },
        { 'name': 'Hong Miao', 'title': 'department manager' },
        { 'name': 'Chun Miao', 'title': 'department manager',
          'children': [
            { 'name': 'Bing Qin', 'title': 'senior engineer',
              'children': [
                { 'name': 'John', 'title': 'engineer' },
                { 'name': 'Do', 'title': 'UE engineer' }
              ]
            },
            { 'name': 'Yue Yue', 'title': 'senior engineer',
              'children': [
                { 'name': 'Er Yue', 'title': 'engineer' },
                { 'name': 'San Yue', 'title': 'UE engineer' }
              ]
            }
          ]
        }
      ]
    };

    var oc = $('#chart-container').orgchart({
      'data' : datasource,
      'nodeContent': 'title',
      'verticalLevel': 4,
      'visibleLevel': 6
    });

    oc.$chart.find('.node')
      .on('mouseenter', function() {
        oc.getParent($(this)).addClass('highlight-parent');
        oc.getSiblings($(this)).addClass('highlight-siblings');
        oc.getChildren($(this)).addClass('highlight-children');
      })
      .on('mouseleave', function () {
        oc.$chart.find('.highlight-parent, .highlight-siblings, .highlight-children')
          .removeClass('highlight-parent highlight-siblings highlight-children');
      });

  });
  </script>
  </body>
</html>
